import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Button, Card, Descriptions, Divider } from 'antd';
import { confirm } from '@tauri-apps/plugin-dialog';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormItem,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { localSharingGetSharedObject, localSharingRemoveSharedObject, localSharingUpdateLastVersion, SharedObject, sharingQuerySharedObjectById, sharingRemoveSharedObjectById, sharingUploadSharedObjectVersion } from '../../services';

export interface SharedPanelProps {
    style?: CSSProperties;
    objectType: string;
    referId: string;
    identifier: string;
    localVersion: string;
    lastVersion: string;
    onFinish: () => Promise<void> | void;
    getDownload: (objectType: string, referId: string, identifier: string) => Promise<string | null>;
}

export const SharedPanel: React.FC<SharedPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [sharedObject, setSharedObject] = useState<SharedObject | null>(null);

    useEffect(() => {
        sharingQuerySharedObjectById(props.identifier).then((obj) => {
            if (obj) {
                setSharedObject(obj);
            } else {
                //错误的关联
                setSharedObject(null);
            }
        })
    }, [props.identifier]);

    if (!sharedObject) {
        return (
            <Container style={props.style}>
            </Container>
        );
    }

    return (
        <Container style={props.style}>
            <Buttons>
                <Button loading={loading} onClick={async () => {
                    setLoading(true);
                    try {
                        const confirmed2 = await confirm('取消关联不会删除云上的分享，可以在“设置”->“我的分享”中查看，确定是否取消关联？', { title: '取消关联', kind: 'warning' });
                        if (confirmed2) {
                            let _ = await localSharingRemoveSharedObject(props.objectType, props.referId, props.identifier);
                            await props.onFinish();
                        }
                    } catch (error) {
                        console.error(error);
                    }
                    setLoading(false);
                }}>取消关联</Button>
                <Button danger loading={loading} onClick={async () => {
                    setLoading(true);
                    try {
                        const confirmed2 = await confirm('“删除分享”将删除云上的分享，删除后无法查看？', { title: '删除分享', kind: 'warning' });
                        if (confirmed2) {
                            let _ = await localSharingRemoveSharedObject(props.objectType, props.referId, props.identifier);
                            await sharingRemoveSharedObjectById(props.identifier);
                            await props.onFinish();
                        }
                    } catch (error) {
                        console.error(error);
                    }
                    setLoading(false);
                }}>删除分享</Button>
            </Buttons>
            <Descriptions title={'分享信息'} layout={'horizontal'} column={1}>
                <Descriptions.Item label="名称">{sharedObject.name}</Descriptions.Item>
                <Descriptions.Item label="图标">{sharedObject.icon}</Descriptions.Item>
                <Descriptions.Item label="描述">{sharedObject.description}</Descriptions.Item>
            </Descriptions>
            <Descriptions title={'本地版本'} layout={'horizontal'} column={1}>
                <Descriptions.Item label="最近分享版本">{props.lastVersion}</Descriptions.Item>
                <Descriptions.Item label="最新本地版本">{props.localVersion}</Descriptions.Item>
            </Descriptions>
            <Divider />
            <FormContainer>
                <ProForm
                    style={{
                        width: '60%'
                    }}
                    loading={loading}
                    onFinish={async (values) => {
                        console.log(values);
                        let version = values.version;
                        let description = values.description;

                        if (!version || version == '') {
                            return;
                        }
                        setLoading(true);
                        try {
                            //获取到上传后的地址
                            let download = await props.getDownload(props.objectType, props.referId, props.identifier);
                            console.log(download);
                            let res = await sharingUploadSharedObjectVersion({
                                identifier: props.identifier,
                                version: values.version,
                                download: download,
                                description: description ? description : '',
                            });
                            // 更新本地版本
                            await localSharingUpdateLastVersion(props.objectType, props.referId, props.identifier, version);

                            //刷新
                            await props.onFinish()
                        } catch (error) {
                            console.error(error);
                        }
                        setLoading(false);
                    }}
                    submitter={false}
                >
                    <ProFormText
                        rules={[{ required: true }]}
                        width="xl" fieldProps={{}} name="version" label="版本" />
                    <ProFormTextArea width="xl" fieldProps={{ rows: 6 }} label="描述" name="description" />
                    <ProFormItem>
                        <Button loading={loading} type="primary" htmlType="submit">
                            分享最新版本
                        </Button>
                    </ProFormItem>
                </ProForm>
            </FormContainer>

        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
`;

const FormContainer = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    display: flex;
    justify-content: center;
    gap: 10px;
`;

const Buttons = styled.div`
    width: 100%;
    padding: 6px 6px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
`;
